<!--<template>
  <div class="xtx-bread">
    <slot></slot>
  </div>
</template>-->

<script>
import { h } from 'vue'

export default {
  name: 'XtxBread',
  components: {},
  /**
   * render选项, 它是一个函数, 函数会默认传入createElement的函数 (h)
   * 这个函数用来创建结构, 在render函数返回渲染为组件内容, 它的优先级最高, 比<template>选项还高
   * @return {VNode}
   */
  render() {
    // 用法
    // 1.template 标签去除, 单文件组件
    // 2.返回值就是组件内容
    // 3.vue2.0 的h函数参数进来的, vue3.0的h函数导入进来
    // 4.h函数第一个参数 标签名字, 第二个参数 标签属性对象, 第三个参数 子节点
    // 需求
    // 1.创建 xtx-bread 父容器
    // 2.获取默认插槽内容
    // 3.取出xtx-bread-item组件的 i 标签, 因该有render函数来组织'
    // 4.遍历插槽中的item, 得到一个动态创建的节点, 最后一个item不加 i 标签
    // 5.把动态创建的节点渲染在xtx-bread标签中
    const items = this.$slots.default()
    const dynamicItems = []
    items.forEach((value, index) => {
      dynamicItems.push(value)
      if (index < items.length - 1) {
        dynamicItems.push(h('i', { class: 'iconfont icon-angle-right' }))
      }
    })
    return h('div', { class: 'xtx-bread' }, dynamicItems)
  }
}
</script>

<style lang="less">

.xtx-bread {
  display: flex;
  //height: 72px;
  width: 100%;
  padding: 25px 10px;

  //.xtx-bread-item {
  //  a {
  //    color: #666;
  //    transition: all 0.4s;
  //
  //    &:hover {
  //      color: @xtxColor;
  //    }
  //  }
  //}

  //
  //.iconfont {
  //  font-size: 12px;
  //  margin: 0 5px;
  //  line-height: 22px;
  //}

  i {
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px;
  }
}
</style>
